<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>
  Hantsy
  
  Bai
  
  
  | a distill-style blog post
  
</title>
<meta name="description" content="My personal website focusing on Java EE/Jakarta EE and Spring.
">

<!-- Open Graph -->


<!-- Bootstrap & MDB -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
  rel="stylesheet" integrity="sha512-MoRNloxbStBcD8z3M/2BmnT+rg4IsMxPkXaGh2zD6LGNNFE80W3onsAhRcMAMrSoyWL9xD7Ert0men7vR8LUZg==" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css"
  integrity="sha512-RO38pBRxYH3SoOprtPTD86JFOclM51/XTIdEPh5j8sj4tp8jmQIx26twG52UaLi//hQldfrh7e51WzP9wuP32Q==" crossorigin="anonymous" />

<!-- Fonts & Icons -->
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
  integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous">
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.9.0/css/academicons.min.css"
  integrity="sha512-W4yqoT1+8NLkinBLBZko+dFB2ZbHsYLDdr50VElllRcNt2Q4/GSs6u71UHKxB7S6JEMCp5Ve4xjh3eGQl/HRvg==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:100,300,400,500,700|Material+Icons">

<!-- Code Syntax Highlighting -->
<link rel="stylesheet"
  href="https://gitcdn.link/repo/jwarby/jekyll-pygments-themes/master/github.css" />

<!-- Styles -->
<link rel="shortcut icon" href="/assets/img/favicon.ico">
<link rel="stylesheet" href="/assets/css/main.css">

<link rel="canonical" href="/blog/2018/distill/">

<!-- JQuery -->
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>


<!-- Theming-->

<script src="/assets/js/theme.js"></script>
<!-- Load DarkMode JS -->
<script src="/assets/js/dark_mode.js"></script>



<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-18SZ2W3GXD"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());

  gtag('config', 'G-18SZ2W3GXD');
</script>




    
<!-- MathJax -->
<script type="text/javascript">
  window.MathJax = {
    tex: {
      tags: 'ams'
    }
  };
</script>
<script defer type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3.1.2/es5/tex-mml-chtml.js"></script>
<script defer src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>


    <script src="/assets/js/distillpub/template.v2.js"></script>
    <script src="/assets/js/distillpub/transforms.v2.js"></script>
    
    <style type="text/css">
      .fake-img {
  background: #bbb;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
} .fake-img p {
  font-family: monospace;
  color: white;
  text-align: left;
  margin: 12px 0;
  text-align: center;
  font-size: 16px;
}

    </style>
    
  </head>

  <d-front-matter>
    <script async type="text/json">{
      "title": "a distill-style blog post",
      "description": "an example of a distill-style blog post and main elements",
      "published": "December 22, 2018",
      "authors": [
        
        {
          "author": "Albert Einstein",
          "authorURL": "https://en.wikipedia.org/wiki/Albert_Einstein",
          "affiliations": [
            {
              "name": "IAS, Princeton",
              "url": ""
            }
          ]
        },
        
        {
          "author": "Boris Podolsky",
          "authorURL": "https://en.wikipedia.org/wiki/Boris_Podolsky",
          "affiliations": [
            {
              "name": "IAS, Princeton",
              "url": ""
            }
          ]
        },
        
        {
          "author": "Nathan Rosen",
          "authorURL": "https://en.wikipedia.org/wiki/Nathan_Rosen",
          "affiliations": [
            {
              "name": "IAS, Princeton",
              "url": ""
            }
          ]
        }
        
      ],
      "katex": {
        "delimiters": [
          {
            "left": "$",
            "right": "$",
            "display": false
          },
          {
            "left": "$$",
            "right": "$$",
            "display": true
          }
        ]
      }
    }</script>
  </d-front-matter>

  <body class="fixed-top-nav ">

    <!-- Header -->

    <header>

    <!-- Nav Bar -->
    <nav id="navbar" class="navbar navbar-light navbar-expand-sm fixed-top">
    <div class="container">
      
      <a class="navbar-brand title font-weight-lighter" href="/">
       <span class="font-weight-bold">Hantsy</span>   Bai
      </a>
      
      <!-- Navbar Toggle -->
      <button class="navbar-toggler collapsed ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
      </button>
      <div class="collapse navbar-collapse text-right" id="navbarNav">
        <ul class="navbar-nav ml-auto flex-nowrap">
          <!-- About -->
          <li class="nav-item ">
            <a class="nav-link" href="/">
              about
              
            </a>
          </li>
          
          <!-- Blog -->
          <li class="nav-item active">
            <a class="nav-link" href="/blog/">
              blog
              
            </a>
          </li>
          
          <!-- Other pages -->
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          <li class="nav-item ">
              <a class="nav-link" href="/projects/">
                projects
                
              </a>
          </li>
          
          
          
          <li class="nav-item ">
              <a class="nav-link" href="/publications/">
                publications
                
              </a>
          </li>
          
          
          
          <li class="nav-item ">
              <a class="nav-link" href="/service/">
                service
                
              </a>
          </li>
          
          
          
            <div class = "toggle-container">
              <a id = "light-toggle">
                  <i class="fas fa-moon"></i>
                  <i class="fas fa-sun"></i>
              </a>
            </div>
          
        </ul>
      </div>
    </div>
  </nav>

</header>


    <!-- Content -->

    <div class="post distill">

      <d-title>
        <h1>a distill-style blog post</h1>
        <p>an example of a distill-style blog post and main elements</p>
      </d-title>

      <d-byline></d-byline>

      <d-article>
        <h2 id="equations">Equations</h2>

<p>This theme supports rendering beautiful math in inline and display modes using <a href="https://www.mathjax.org/" target="\_blank">MathJax 3</a> engine.
You just need to surround your math expression with <code class="language-plaintext highlighter-rouge">$$</code>, like <code class="language-plaintext highlighter-rouge">$$ E = mc^2 $$</code>.
If you leave it inside a paragraph, it will produce an inline expression, just like \(E = mc^2\).</p>

<p>To use display mode, again surround your expression with <code class="language-plaintext highlighter-rouge">$$</code> and place it as a separate paragraph.
Here is an example:</p>

\[\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)\]

<p>Note that MathJax 3 is <a href="https://docs.mathjax.org/en/latest/upgrading/whats-new-3.0.html" target="\_blank">a major re-write of MathJax</a> that brought a significant improvement to the loading and rendering speed, which is now <a href="http://www.intmath.com/cg5/katex-mathjax-comparison.php" target="\_blank">on par with KaTeX</a>.</p>

<hr />

<h2 id="citations">Citations</h2>

<p>Citations are then used in the article body with the <code class="language-plaintext highlighter-rouge">&lt;d-cite&gt;</code> tag.
The key attribute is a reference to the id provided in the bibliography.
The key attribute can take multiple ids, separated by commas.</p>

<p>The citation is presented inline like this: <d-cite key="gregor2015draw"></d-cite> (a number that displays more information on hover).
If you have an appendix, a bibliography is automatically created and populated in it.</p>

<p>Distill chose a numerical inline citation style to improve readability of citation dense articles and because many of the benefits of longer citations are obviated by displaying more information on hover.
However, we consider it good style to mention author last names if you discuss something at length and it fits into the flow well — the authors are human and it’s nice for them to have the community associate them with their work.</p>

<hr />

<h2 id="footnotes">Footnotes</h2>

<p>Just wrap the text you would like to show up in a footnote in a <code class="language-plaintext highlighter-rouge">&lt;d-footnote&gt;</code> tag.
The number of the footnote will be automatically generated.<d-footnote>This will become a hoverable footnote.</d-footnote></p>

<hr />

<h2 id="code-blocks">Code Blocks</h2>

<p>Syntax highlighting is provided within <code class="language-plaintext highlighter-rouge">&lt;d-code&gt;</code> tags.
An example of inline code snippets: <code class="language-plaintext highlighter-rouge">&lt;d-code language="html"&gt;let x = 10;&lt;/d-code&gt;</code>.
For larger blocks of code, add a <code class="language-plaintext highlighter-rouge">block</code> attribute:</p>

<d-code block="" language="javascript">
  var x = 25;
  function(x) {
    return x * x;
  }
</d-code>

<hr />

<h2 id="layouts">Layouts</h2>

<p>The main text column is referred to as the body.
It is the assumed layout of any direct descendants of the <code class="language-plaintext highlighter-rouge">d-article</code> element.</p>

<div class="fake-img l-body">
  <p>.l-body</p>
</div>

<p>For images you want to display a little larger, try <code class="language-plaintext highlighter-rouge">.l-page</code>:</p>

<div class="fake-img l-page">
  <p>.l-page</p>
</div>

<p>All of these have an outset variant if you want to poke out from the body text a little bit.
For instance:</p>

<div class="fake-img l-body-outset">
  <p>.l-body-outset</p>
</div>

<div class="fake-img l-page-outset">
  <p>.l-page-outset</p>
</div>

<p>Occasionally you’ll want to use the full browser width.
For this, use <code class="language-plaintext highlighter-rouge">.l-screen</code>.
You can also inset the element a little from the edge of the browser by using the inset variant.</p>

<div class="fake-img l-screen">
  <p>.l-screen</p>
</div>
<div class="fake-img l-screen-inset">
  <p>.l-screen-inset</p>
</div>

<p>The final layout is for marginalia, asides, and footnotes.
It does not interrupt the normal flow of <code class="language-plaintext highlighter-rouge">.l-body</code> sized text except on mobile screen sizes.</p>

<div class="fake-img l-gutter">
  <p>.l-gutter</p>
</div>

      </d-article>

      <d-appendix>
        <d-footnote-list></d-footnote-list>
        <d-citation-list></d-citation-list>
      </d-appendix>

    </div>

    <!-- Footer -->

    
<footer class="fixed-bottom">
  <div class="container mt-0">
    &copy; Copyright 2021 Hantsy  Bai.
    <span class="mr-auto"></span>
    Powered by <a href="http://jekyllrb.com/" target="_blank">Jekyll</a> with <a href="https://github.com/alshedivat/al-folio">al-folio</a> theme.

    
    

  </div>
</footer>



  </body>

  <d-bibliography src="/assets/bibliography/2018-12-22-distill.bib">
  </d-bibliography>

</html>
